<template>
	<view class="page-team">
		<view class="content">
			<view class="Statistics">
				<view class="top">
					<view class="bgbox">
					</view>
					<view class="information">
						<view class="left">
							<image :src="avatar"></image>
						</view>
						<view class="right">
							<view class="name">
								名称：{{ nickname.length > 13 ? nickname.substring(0, 13) + "..." : nickname }}
							</view>
							<view class="member">
								<text v-if="level == 1">游客</text>
								<text v-if="level == 2">VIP</text>
								<!-- <text v-if="level == 2">经理</text> -->
								<text v-if="level == 3">联创</text>
								<text v-if="level == 4">{{ isOpenCrown == 'Y'?'联营公司1':'联营公司'}}</text>
							</view>
							<view class="card">
								ID：{{uid}}
							</view>
						</view>
					</view>
					<view class="information-time">
						<text>加入时间: {{time}}</text>
					</view>
					<view class="information-time">
						<text>电话: {{phone}}</text>
					</view>
					<view class="tel-phone" v-if="phone">
						<image @click="telPhone" src="https://h5.ylsp.vip/file/static/phone-icon-01.png" mode="">
						</image>
					</view>
				</view>
			</view>
			<view class="Statistics plate">
				<view class="top">
					<view class="bgbox">
					</view>
					<view class="title">
						直属人数
					</view>
					<view class="store">
						{{under_count}}
					</view>
					<view class="group">
						直属当月业绩： {{ vip_currentMonth_total_sum }}
					</view>
					<!-- <view class="group">
						游客人数： {{normal_count}}
					</view>
					<view class="total">
						总团队人数： {{total_count}}
					</view> -->
				</view>
				<!-- <view class="bottom">
					<view class="td">
						<view class="span">
							{{total_order_count}}
						</view>
						<view class="text">
							我的单量
						</view>
					</view>
					<view class="td">
						<view class="span">
							{{ vip_directly_count }}
						</view>
						<view class="text">
							直属总单量
						</view>
					</view>
				</view> -->
			</view>
			<view class="directlyUnder">
				<view class="title" @click="viewAll(nickname,uid)">
					▎最近动态
					<text class="icon iconfont icon-xiangyou"></text>
				</view>
			</view>
			<view class="member">
				<view class="dynamic" v-for="(item, collectProductListIndex) in collectProductList"
					:key="collectProductListIndex">
					<view class="time">
						用户<text
							class="user">{{ nickname.length > 4 ? nickname.substring(0, 4) + "..." : nickname }}</text>在
						<text class="createTime">{{ item.createTime }}</text>{{ item.category == '登录'? '登录小程序' : '浏览此商品' }}
					</view>
					<view class="pnt-contetn" v-if="item.category != '登录'">
						<view class="images">
							<image :src="item.image" />
						</view>
						<view class="right">
							<view class="name">
								{{ item.storeName }}
							</view>
							<view class="price">
								￥{{ item.price }}
							</view>
						</view>
					</view>
					<view class="category" v-if="item.category != '普通' && item.category != '登录'">
						{{ item.category == null ? '' : item.category }}
					</view>
				</view>
				<view class="record-bg" v-if="record">
					<image src="https://h5.ylsp.vip/file/static/record-bg.png"></image>
				</view>
				<Loading :loaded="loadend" :loading="loading"></Loading>
			</view>
		</view>

	</view>


</template>
<script>
	import {
		mapGetters
	} from "vuex";
	import {
		getSpreadUser,
		getSpreadUser4directly,
		getCollectUser4product
	} from "@/api/user";
	import Loading from "@/components/Loading";
	const NAME = "directlyUnder";
	export default {
		components: {
			Loading
		},
		data() {
			return {
				fixedState: false,
				childCount: 2,
				numberCount: 2,
				orderCount: 2,
				spreadList: [],
				loadTitle: "",
				under_count: 0, //直属数
				normal_count: 0, //游客人数
				total_count: 0, //总团队人数
				total_order_count: 0, // 团队总单数
				vip_hd_count: 0, //299总单数
				vip_directly_count: 0, //299直属总单数
				vip_total_sum: 0,//当月直属业绩
				vip_currentMonth_total_sum: 0,//当月直属业绩
				avatar: '',
				uid: 0,
				nickname: '',
				level: '',
				time: '',
				phone: '',
				isOpenLian: '',
				isOpenCrown: '',
				page: 1,
				limit: 3,
				type: 'foot',
				collectProductList: [],
				loading: false,
				loadend: false,
				record: false
			}
		},
		computed: mapGetters(["userInfo"]),
		mounted: function() {
			this.avatar = this._route.query.avatar;
			this.uid = this._route.query.uid;
			this.nickname = this._route.query.nickname;
			this.level = this._route.query.level;
			this.time = this._route.query.time;
			this.phone = this._route.query.phone;
			this.isOpenLian = this._route.query.isOpenLian;
			this.isOpenCrown = this._route.query.isOpenCrown;
			console.log(this._route.query)
			this.getSpreadUsers();
			this.get_user_collect_product();
		},
		onReachBottom() {
			!this.loading && this.getSpreadUsers();
		},
		methods: {
			getSpreadUsers: function() {
				let that = this,
					screen = that.screen;
				getSpreadUser4directly(screen, that.uid).then(
					res => {
						that.spreadList.push.apply(that.spreadList, res.data.list);
						that.under_count = res.data.under_count;
						that.normal_count = res.data.normal_count
						that.total_count = res.data.total_count
						that.total_order_count = res.data.total_order_count
						that.vip_hd_count = res.data.vip_hd_count
						that.vip_directly_count = res.data.vip_directly_count
						that.vip_total_sum = res.data.vip_total_sum
						that.vip_currentMonth_total_sum = res.data.vip_currentMonth_total_sum
					},
					err => {
						uni.showToast({
							title: err.msg || err.response.data.msg || err.response.data.message,
							icon: "none",
							duration: 2000
						});
					},
					300
				);
			},

			get_user_collect_product: function() {
				let that = this;
				if (that.loading) return; 
				if (that.loadend) return; 
				that.loading = true;
				getCollectUser4product(that.page, that.limit, that.type, that.uid).then(res => {
					that.loading = false;
					that.collectProductList.push.apply(that.collectProductList, res.data);
					that.loadend = res.data.length < that.limit; 
					console.log(res.data)
					if (res.data.length >= 3) {
						that.loadend = true
					}
					if (res.data.length > 0) {
						that.record = false
					} else {
						that.record = true
					}
					that.page = that.page + 1;
				});
			},

			telPhone() {
				uni.makePhoneCall({
					phoneNumber: this.phone,
					success: (res) => {
						console.log('调用成功!')
					},
					fail: (res) => {
						console.log('调用失败!')
					}
				});
			},
			viewAll(nickname, uid) {
				this.$yrouter.push({
					path: "/pages/team/dynamic/index",
					query: {
						uid: uid,
						nickname: nickname,
					},
				});
			}
		}
	}
</script>

<style lang="less">
	page {
		height: initial;
	}

	.page-team {
		height: 100%;
		width: 100%;

		.content {
			width: 100%;



			.Statistics {
				height: 340rpx;
				margin: 20rpx;
				box-sizing: border-box;
				background-color: #FFFFFF;
				border-radius: 10rpx;
				overflow: hidden;

				.settlement {
					height: 140rpx;
					width: 100%;
					padding: 0 30rpx 0 40rpx;
					box-sizing: border-box;
					position: relative;

					.order,
					.amount {
						height: 70rpx;
						line-height: 70rpx;
						color: #666;
						font-size: 26rpx;

						text {
							float: right;
						}
					}
				}

				.settlement::before {
					position: absolute;
					content: '';
					height: 1rpx;
					width: 90%;
					top: 0;
					left: 5%;
					border-top: #E8E8E8 solid 1rpx;
				}

				.bottom {
					height: 160rpx;
					width: 100%;
					display: table;
					table-layout: fixed;

					.td {
						position: relative;
						display: table-cell;
						text-align: center;
						vertical-align: middle;

						.text {
							text-align: center;
							font-size: 26rpx;
							color: #666;
							padding-top: 26rpx;
						}

						.span {
							text-align: center;
							font-size: 40rpx;
							font-weight: 900;
						}
					}

					.td:nth-child(1)::before {
						position: absolute;
						content: '';
						height: 40rpx;
						width: 1rpx;
						border-right: #666 solid 2rpx;
						right: 0;
						bottom: 20rpx;
					}
				}

				.top {
					background-color: #222222;
					height: 340rpx;
					width: 100%;
					padding: 40rpx;
					position: relative;

					.title {
						font-size: 36rpx;
						color: #FFFFFF;
						padding: 30rpx 0 0 30rpx;
					}

					.store {
						font-size: 50rpx;
						color: #FFFFFF;
						padding: 20rpx 0 0 30rpx;
					}

					.group {
						font-size: 30rpx;
						color: #FFFFFF;
						padding: 10rpx 0 0 30rpx;
					}

					.total {
						font-size: 30rpx;
						color: #FFFFFF;
						padding: 10rpx 0 0 30rpx;
					}

					.tel-phone {
						position: absolute;
						right: 45rpx;
						bottom: 25rpx;
						height: 70rpx;
						width: 40rpx;
						display: inline-block;

						text {
							color: #FFFFFF;
						}

						image {
							width: 100%;
							height: 100%;
						}
					}

					.bgbox {
						position: absolute;
						top: 0;
						left: 0;
						height: 100%;
						width: 100%;
						background-image: url('https://h5.ylsp.vip/file/static/images/accountBg.png');
						background-size: 100% 100%;
					}

					.information {
						height: 140rpx;
						width: 100%;

						.left {
							height: 140rpx;
							width: 140rpx;
							border-radius: 10rpx;
							overflow: hidden;
							float: left;

							image {
								width: 100%;
								height: 100%;
							}
						}

						.right {
							width: calc(100% - 140rpx);
							float: left;
							box-sizing: border-box;
							padding-left: 20rpx;

							.name,
							.card {
								color: #FFFFFF;
								font-size: 26rpx;
							}

							.member {
								margin-top: 10rpx;
								margin-bottom: 15rpx;



								text {
									padding: 7rpx 20rpx;
									background: -webkit-linear-gradient(to left, #ff424c, #faa159);
									/* Safari 5.1-6.0 */
									background: -o-linear-gradient(to left, #ff424c, #faa159);
									/* Opera 11.1-12.0 */
									background: -moz-linear-gradient(to left, #ff424c, #faa159);
									/* Firefox 3.6-15 */
									background: linear-gradient(to left, #ff424c, #faa159);
									/* 标准语法 */
									color: #FFFFFF;
									font-size: 26rpx;
									border-radius: 50rpx;
								}
							}
						}
					}

					.information-time {
						margin-top: 20rpx;

						text {
							padding: 5rpx 20rpx;
							background-color: rgba(255, 255, 255, 0.2);
							border-radius: 20rpx;
							color: #FFFFFF;
							font-size: 26rpx;
						}
					}
				}
			}

			.plate {
				height: 510rpx;

				.top {
					padding: 0 !important
				}
			}

			.member {
				margin-top: 20rpx;

				.record-bg {
					height: 300rpx;
					width: 100%;

					image {
						width: 300rpx;
						height: 300rpx;
						display: block;
						margin: 0 auto;
					}
				}

				.dynamic {
					padding: 20rpx;
					background-color: #FFFFFF;
					margin-bottom: 20rpx;
					margin-left: 30rpx;
					margin-right: 30rpx;
					border-radius: 10rpx;
					position: relative;

					.category {
						position: absolute;
						right: 0;
						bottom: 0;
						height: 50rpx;
						display: inline-block;
						padding: 0 30rpx;
						background: -webkit-linear-gradient(to left,#f0c794,#ae9273); /* Safari 5.1-6.0 */
						background: -o-linear-gradient(to left,#f0c794,#ae9273); /* Opera 11.1-12.0 */ 
						background: -moz-linear-gradient(to left,#f0c794,#ae9273); /* Firefox 3.6-15 */
						background: linear-gradient(to left,#f0c794,#ae9273); /* 标准语法 */
						color: #FFFFFF;
						line-height: 50rpx;
						font-size: 28rpx;
						border-top-left-radius: 30rpx;
					}

					.pnt-contetn {
						overflow: hidden;
						padding: 30rpx 0 20rpx 0;

						.right {
							padding-left: 160rpx;

							.name {
								color: #666;
								font-size: 30rpx;

							}

							.price {
								color: #ff3334;
								font-size: 32rpx;
								padding-top: 30rpx;

							}
						}

						.images {
							height: 140rpx;
							width: 140rpx;
							float: left;

							image {
								width: 100%;
								height: 100%;
							}
						}
					}

					.time {
						color: #666;
						border-bottom: #E8E8E8 solid 1rpx;
						padding-bottom: 20rpx;
						font-size: 26rpx;

						.user {
							color: #1105fc;
							padding: 0 10rpx;
						}

						.createTime {
							color: #1105fc;
							padding: 0 10rpx;
						}
					}
				}
			}

			.directlyUnder {
				width: 100%;
				min-height: 100rpx;
				max-height: 360rpx;
				padding-bottom: 20rpx;
				background-color: #FFFFFF;

				.title {
					color: #000000;
					font-size: 36rpx;
					position: relative;
					padding: 30rpx 30rpx 0 30rpx;

					text {
						float: right;
						margin-top: 10rpx;
					}
				}
			}
		}
	}
</style>
